<template>
  <dl class="system-tray">
    <dt>
      <i class="iconfont wos-to-top fs12" />
    </dt>
    <dd
      v-for="item in trayList"
      :key="item.appId"
      :data-tray-id="item.id"
      @click="handleCheckTask(item.appId, item.id)"
      @contextmenu.prevent.stop="handleContext($event, item)"
    >
      <img :src="getImageUrl(`app/${item.trayIcon.trim()}.png`)" :alt="item.appId" />
    </dd>
    <dd @click.stop="systemVoiceVisible = !systemVoiceVisible">
      <voice-icon
        class="voice"
        :volume="systemSettingStore.$state.systemVolume"
        :muted="systemSettingStore.$state.systemMuted"
      />
      <task-modal v-model="systemVoiceVisible">
        <system-voice-modal />
      </task-modal>
    </dd>
  </dl>
  <teleport to="body">
    <transition>
      <component
        v-model="taskTrayMenuVisible"
        :data="currentData"
        :is="trayMenuList[currentTrayMenu]"
        :appId="currentAppId"
        :taskId="currentTaskId"
        :position="[trayInfo.x, trayInfo.y]"
      />
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import VoiceIcon from '@/components/taskBar/voiceIcon.vue'
import SystemVoiceModal from '@/components/taskBar/systemVoiceModal.vue'
import QQTrayMenu from '@/components/systemWindow/qq/qqTrayMenu.vue'
import WeChatTrayMenu from '@/components/systemWindow/weChat/weChatTrayMenu.vue'
import KuGouTrayMenu from '@/components/systemWindow/kuGou/kuGouTrayMenu.vue'
import { computed, markRaw, reactive, ref } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { getImageUrl, trayMitt } from '@/utils/utils'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import type { IRunningTasksList } from '@/stores/taskBar/runningTasks'
import type { Raw } from 'vue'
import type { Component } from 'vue'

const systemVoiceVisible = ref<boolean>(false)
const taskTrayMenuVisible = ref<boolean>(false)
const currentTrayMenu = ref<string>('')
const currentAppId = ref<string>('')
const currentTaskId = ref<string>('')
const currentData = ref<IRunningTasksList>()
const trayInfo = reactive({ x: 0, y: 0 })
const trayMenuList = reactive<{ [key: string]: Raw<Component> }>({
  weChat: markRaw(WeChatTrayMenu),
  QQ: markRaw(QQTrayMenu),
  kuGou: markRaw(KuGouTrayMenu)
})

const runningTasksStore = useRunningTasksStore()
const systemSettingStore = useSystemSettingStore()

const trayList = computed<Array<IRunningTasksList & { appId: string }>>(() => {
  const list: Array<IRunningTasksList & { appId: string }> = []
  runningTasksStore.$state.runningTasks.forEach((item) => {
    list.push(...item.list.map((child) => ({ ...child, appId: item.appId })).filter((child) => child.tray))
  })
  return list
})

// 选中显示任务
const handleCheckTask = (appId: string, id: string) => {
  currentAppId.value = appId
  currentTaskId.value = id
  trayMitt.emit('trayClick', { appId, taskId: id })
}

// 右键
const handleContext = (ev: MouseEvent, trayMenu: IRunningTasksList & { appId: string }) => {
  trayInfo.x = ev.x
  trayInfo.y = ev.y
  currentAppId.value = trayMenu.appId
  currentTaskId.value = trayMenu.id
  currentData.value = trayMenu
  currentTrayMenu.value = String(trayMenu?.componentData?.trayMenu)
  taskTrayMenuVisible.value = true
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin';

.system-tray {
  height: 100%;
  margin-right: 10px;
  display: flex;
  align-items: center;

  dt,
  dd {
    width: 26px;
    min-width: 26px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      @include hover-model;
    }

    img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      object-position: center center;
    }
  }

  .voice {
    width: 18px;
    height: 18px;
  }
}
</style>
